<template>
  <input type="file" @change="uploadFile" />
</template>

<script>
import axios from 'axios'
import {ref } from 'vue'

export default {
  setup(props,{emit}) {
    const imageUrl = ref('') // 创建响应式数据

    const uploadFile = async (event) => {
      const file = event.target.files[0]
      if (!file) {
        console.error('No file selected')
        return
      }
      const formData = new FormData()
      formData.append('file', file)

      const response = await axios.post('/oss/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      console.log(response)
      imageUrl.value = response.data.url
      console.log(imageUrl.value)
      emit('update:imageUrl', imageUrl.value) // 触发自定义事件
    }

    return { uploadFile, imageUrl } // 返回方法
  }
}
</script>
